<!-- 
 @author chenjw
 2019.10.28 add into this directory
 -->
<template>
	<view >
		<!-- 顶部 -->
		<!-- <view class="bg-white top">
			<view class="flxeRow">
				<text class="lg text-grey cuIcon-back icon_b" @tap="fallback()"></text>
				<text class="text">开店申请</text>
			</view>
		</view> -->
		<view class="bg-white" >
			<text class="text_c">填写信息</text>
		</view>
		<view v-if="picker_index<=2">
			<!-- 店铺类型选择器 -->
			<view class="cu-form-group " >	
				<view class="text_b"><text class="sign">*</text>店铺类型:</view>
				<!--  -->
					<picker @change="PickerChange"  v-model="formData.type[picker_index]" :range="picker">
						<view class="picker text_form_input">
							{{picker[picker_index]}}
						</view>
					</picker>
			</view>
			<!-- 类型为个人时的表单 -->
			<view v-if="picker_index==0" >
				<!-- 信息第二部分 -->
				<form>
					<view class="cu-form-group margin-top">
						<view class="text_b"><text class="sign">*</text>店铺名称:</view>
						<input class="text_form_input" placeholder="最多15个字"  v-model="formData.store_name"  @blur="StoreNameCheck()" ></input>
					</view>
					<view class="cu-form-group">
						<view class="text_b"><text class="sign">*</text>姓名:</view>
						<input class="text_form_input" placeholder="证件名" v-model="formData.holder_name" @blur="HolderNameCheck()"></input>
					</view>
					<view class="cu-form-group">
						<view class="text_b"><text class="sign">*</text>身份证:</view>
						<input class="text_form_input" placeholder="中国大陆居民身份证件号" v-model="formData.id_card" @blur="IdCardCheck()"></input>
					</view>
					<view class="cu-form-group ">	
						<view class="text_b"><text class="sign">*</text>身份证期限:</view>
						<!--  -->
							<picker @change="PickerChange2" v-model="formData.id_card_time_limit[picker2_index]" :range="picker2">
								<view class="picker text_form_input">
									{{picker2[picker2_index]}}
								</view>
							</picker>
					</view>
				</form>
		
			</view>
			
			<!-- 类型为企业时的表单 -->
			<view v-if="picker_index==1">
				<hr class="hr_style2">
				<view class="cu-form-group">
					<view class="text_b"><text class="sign">*</text>企业名称:</view>
					<input class="text_form_input" placeholder="企业名称" v-model="formData.enterprise_name" @blur="StoreNameCheck()"></input>
				</view>
				<!-- 信息第二部分 -->
				<form>
					<view class="cu-form-group margin-top">
						<view class="text_b"><text class="sign">*</text>店铺名称:</view>
						<input class="text_form_input" placeholder="最多15个字"  v-model="formData.store_name" @blur="StoreNameCheck()"></input>
					</view>
					<view class="cu-form-group">
						<view class="text_b"><text class="sign">*</text>负责人姓名:</view>
						<input class="text_form_input" placeholder="证件名" v-model="formData.holder_name" @blur="HolderNameCheck()"></input>
					</view>
					<view class="cu-form-group">
						<view class="text_b"><text class="sign">*</text>身份证:</view>
						<input class="text_form_input" placeholder="中国大陆居民身份证件号" v-model="formData.id_card" @blur="IdCardCheck()"></input>
					</view>
					<view class="cu-form-group ">	
						<view class="text_b"><text class="sign">*</text>身份证期限:</view>
						<!--  -->
							<picker @change="PickerChange2" v-model="formData.id_card_time_limit[picker2_index]" :range="picker2">
								<view class="picker text_form_input">
									{{picker2[picker2_index]}}
								</view>
							</picker>
					</view>
				</form>
				
				
			</view>
			<!-- 类型为个体工商户时的表单 -->
			<view v-if="picker_index==2" >
				<!-- 信息第二部分 -->
				<form>
					<view class="cu-form-group margin-top">
						<view class="text_b"><text class="sign">*</text>店铺名称:</view>
						<input class="text_form_input" placeholder="最多15个字"  v-model="formData.store_name" @blur="StoreNameCheck()"></input>
					</view>
					<view class="cu-form-group">
						<view class="text_b"><text class="sign">*</text>负责人姓名:</view>
						<input class="text_form_input" placeholder="证件名" v-model="formData.holder_name" @blur="HolderNameCheck()"></input>
					</view>
					<view class="cu-form-group">
						<view class="text_b"><text class="sign">*</text>身份证:</view>
						<input class="text_form_input" placeholder="中国大陆居民身份证件号" v-model="formData.id_card" @blur="IdCardCheck()"></input>
					</view>
					<view class="cu-form-group ">	
						<view class="text_b"><text class="sign">*</text>身份证期限:</view>
						
							<picker @change="PickerChange2" v-model="formData.id_card_time_limit[picker2_index]" :range="picker2">
								<view class="picker text_form_input">
									{{picker2[picker2_index]}}
								</view>
							</picker>
					</view>
				</form>
				
			</view>
			
			<!-- 信息第三部分 -->
			<view >
				<form>
					<view class="cu-form-group margin-top">
						<view class="text_b"><text class="sign">*</text>手机号码:</view>
						<input class="text_form_input" placeholder="将用于接收通知短信及店铺账号等信息" v-model="formData.phone_num" 
							></input>
					</view>
					<view class="cu-form-group">
						<view class="text_b"><text class="sign">*</text>手机验证码:</view>
						<input class="text_form_input" placeholder="请输入验证码" v-model="formData.verification_code"  ></input>
						<button class='codeBtn' @tap="SendCode()" :disabled="disabled">{{btntxt}}</button>
					</view>
				</form>
			</view>
			<!-- 底部协议 -->
			<view class=" margin-top">
				<!-- <image src="../static/tick.png" mode=""></image> -->
				<image class="radio-img" :src="img" @tap="checkRadio" mode="tick"></image>
				<!-- <radio  :class="radio?'checked p_radio':'p_radio'" :checked="radio" @tap="checkRadio" style="font-size: 12px;"></radio> -->
				<navigator url="#" style="float: left;">《琪心商城商家入驻协议》</navigator>
				
			</view>
			
			
		</view>
		<!-- 上传图片 -->
		<!-- 企业 -->
	    <view v-if="flag_one==1">
			<view  v-if="picker_index==3">
				<view v-for="(title,index) in titleList" :key="index">
					<view class="rectangle bg-white flxeRow">
						<view class="m-left">
							<view class="text_b"><text class="sign">*</text>{{title}}</view>
							<form class="input-area"  >
								<view class=" grid col-4 grid-square flex-sub"  >
									<!-- class="grid  grid-square flex-sub" col-4 -->
									<!-- 上传图片回显 -->
									<view class="bg-img flex-cc" v-if="imgList[index].img!=''"  >
									 <image :src="imgList[index].img" mode="aspectFill"  @tap="ViewImage(index)"></image>
										<view class="cu-tag bg-red" @tap.stop="DelImg(index)" >
											<text class="cuIcon-close"></text>
										</view>
									</view>
									<!-- 负责显示上传按钮 -->
									<view class="solids" @tap="ChooseImage(index)" v-if="imgList[index].img==''" >
										<text class="cuIcon-cameraadd"></text>
									</view>
								</view>
							</form>
						</view>
						<view class="m-left">
							<view class="text_b">示例：</view>
							<view class="show-area">
								<image :src="exmpList[index]"  class=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
        <!-- ***** -->
		</view>
		
		<!-- 其他 -->
		<view v-if="flag_one==0||flag_one==2">
			<view  v-if="picker_index==3">
				<view v-for="(title,index) in titleList2" :key="index">
					<view class="rectangle bg-white flxeRow">
						<view class="m-left">
							<view class="text_b"><text class="sign">*</text>{{title}}</view>
							<view class="input-area">
								<form>
									<view class="show-image " >
										<!-- 上传图片回显 -->
										<view class="bg-img" v-if="imgList[index].img!=''"  >
										 <image :src="imgList[index].img" mode="aspectFill"  @tap="ViewImage(index)"></image>
											<view class="cu-tag bg-red" @tap.stop="DelImg(index)" >
												<text class="cuIcon-close" ></text>
											</view>
										</view>
										<!-- 负责显示上传按钮 -->
										<view class="add-image" @tap="ChooseImage(index)" v-if="imgList[index].img==''" >
											<text class="cuIcon-cameraadd"></text>
										</view>
									</view>
								</form>
							</view>
						</view>
						<view class="m-left">
							<view class="text_b">示例：</view>
							<image :src="exmpList2[index]"  class="show-area"></image>
						</view>
					</view>
				</view>
			</view>
		<!-- ***** -->
		</view>
		
		<view >
			<button class="nextBtn" @tap="NextStep()" >下一步</button>
		</view>
	
	</view>
	
	
</template>

<script>
	export default{
		
		data(){
			return{
				flag_one: 0 ,//是否企业
				flag_two: 0 ,//标记当前页面
				picker_index : 0, //
				picker2_index : 0,
				picker: ['个人', '企业','个体工商户' ],
				picker2: ['5 年', '10 年','永 久' ],
				radio: false,
				img: '../../../static/shopApplication/tick2.png',
				formData : {
					type: 0,//店铺类型
					enterprise_name: "",//企业名称
					store_name : "",//店铺名称
					holder_name : "",//持有人名字
					id_card : "",//身份证号
					id_card_time_limit : 1, //身份证号期限
					phone_num : "",//电话号码
					verification_code : "" //验证码
				},
				btntxt: "获取验证码",
				disabled: false,
				time: 0,
				imgList: [
					{id:1,img:""},{id:2,img:""},{id:3,img:""},{id:4,img:""}
				],//上传
				titleList: ["身份证头像面:","身份证国徽面:","手持身份证半身照:","营业执照:"],
				titleList2: ["身份证头像面:","身份证国徽面:","手持身份证半身照:"],
				exmpList: ["../../../static/shopApplication/id.png","../../../static/shopApplication/idBack.png",
				"../../../static/shopApplication/person.png",
				"../../../static/shopApplication/listen.png"],
				exmpList2: ["../../../static/shopApplication/id.png","../../../static/shopApplication/idBack.png",
				"../../../static/shopApplication/person.png"]
			};
		},
		onLoad() {
			
		},
		methods: {
			PickerChange(e) {
				this.picker_index = e.detail.value;
				
			},
			PickerChange2(e) {
				this.picker2_index = e.detail.value;
			},
			checkRadio() {
				this.radio = !this.radio;
				if(this.radio){
					this.img='../../../static/shopApplication/tick.png';
				}else{
					this.img='../../../static/shopApplication/tick2.png';
				}
			},
			SendCode(){
				let reg = /^1[3456789]\d{9}$/;
				if (this.formData.phone_num == '') {
					//alert("手机号不能为空");
					uni.showToast({
						icon : 'none',
					    title: '手机号不能为空',
					    duration: 2000
					});

				} else if (!reg.test(this.formData.phone_num)) {
					//alert("手机号码格式不正确！");
					uni.showToast({
						icon : 'none',
					    title: '手机号码格式不正确',
					    duration: 2000
					});
				} else {
					this.time = 30;
					this.disabled = true;
					//验证码的时间设置 可有可无
					this.timer();
					//异步
				}
			},
			//验证码的倒计时
			timer() {
				if (this.time > 0) {
					this.time--;
					this.btntxt = this.time + "s后获取";
					setTimeout(this.timer, 1000);
				} else {
					this.time = 0;
					this.btntxt = "获取验证码";
					this.disabled = false;
				}
			},		
			StoreNameCheck(){
				let reg=/^[A-Za-z0-9\u4e00-\u9fa5]{2,15}$/;
				if (this.formData.store_name == '') {
					//alert("店铺名称不能为空");
					uni.showToast({
						icon : 'none',
					    title: '店铺名称不能为空',
					    duration: 2000
					});
					
				}else if(!reg.test(this.formData.store_name)){
					//alert("店铺名称不合法");
					uni.showToast({
						icon : 'none',
					    title: '店铺名称不合法',
					    duration: 2000
					});
				}else{
					//合法
					return true;
				}
			},
			HolderNameCheck(){
				// 1.可以是中文
				// 2.可以是英文，允许输入点（英文名字中的那种点）， 允许输入空格
				//3.中文和英文不能同时出现
				//4.长度在20个字符以内
				let reg= /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/;
				if (this.formData.holder_name == '') {
					//alert("持有人姓名不能为空");
					uni.showToast({
						icon : 'none',
					    title: '持有人姓名不能为空',
					    duration: 2000
					});
				}else if(!reg.test(this.formData.holder_name)){
					//alert("持有人姓名不能为空不合法");
					uni.showToast({
						icon : 'none',
					    title : '持有人姓名不合法',
					    duration : 2000
					});
				}else{
					//合法
					return true;
				}
			},
			IdCardCheck(){
				let reg= /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (this.formData.id_card == '') {
					//alert("身份证号码不能为空");
					uni.showToast({
						icon : 'none',
					    title: '身份证号码不能为空',
					    duration: 2000
					});
				}else if(!reg.test(this.formData.id_card)){
					//alert("身份证号码不合法");
					uni.showToast({
						icon : 'none',
					    title: '身份证号码不合法',
					    duration: 2000
					});
				}else{
					//合法
					return true;
				}
			},
			NextStep(){
				this.flag_two++;//步骤++ 页面深度++
				if(this.picker_index==1){
					this.flag_one=1;//企业
				}else if(this.picker_index==2){
					this.flag_one=2;//个体工商
				}
				this.picker_index=3;
				if(this.flag_two==2){
					// 需要传递表单参数， 查询进度
					// console.log("xiayibu");
					uni.navigateTo({
						url : 'shopApplication' 
					})
				}

			},
			fallback(){
				if(this.flag_two==0){
					uni.navigateBack();//返回上一页
					return;
				}
				if(this.picker_index==3&&this.flag_one==0){
					this.picker_index=0; //显示个人
					this.flag_two=0;  
				}else if(this.picker_index==3&&this.flag_one==2) {
					this.picker_index=2; //显示个体工商户
					this.flag_two=0;
				}else{
					this.picker_index=1; //显示企业
					this.flag_two=0;
				}
			},
			
			ChooseImage(e) {
				let than = this;
				// let list =this.imgList;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res.tempFilePaths,"图片return");
						// console.log(than.imgList[e].img)
						than.imgList[e].img = res.tempFilePaths.toString();
						//console.log(than.imgList[e][0])
					}
				});

			},
			ViewImage(index) {
				let than = this;
				let list = [];
				/*必须是单层列表才可以用*/
				for (let i = 0; i < than.imgList.length; i++) { 
					list.push(than.imgList[i].img)
				}
				uni.previewImage({
					urls: list,
					current:  0
				});
			},
			DelImg(index) {
				let than = this;
				uni.showModal({
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm){
							than.imgList[index].img='';
						}
					}
				});
			},
			
		},//
	
		onBackPress(e){
			// console.log("fanhuile1")
			 if (e.from === 'navigateBack') {  
			    return false;  //直接调用navigateBack会出现循环调用的情况
			 } 
			this.fallback();
			return true ;//表示禁止默认返回
		}
	}
</script>
	 
<style>
	@import "../../../common/shopApplication";
    /*palaceholderyangshi1*/
	.uni-input-placeholder ,a:-webkit-any-link ,.codeBtn ,.nextBtn  {
		font-family : PingFang-SC-Medium,PingFang-SC;
		font-weight : 500;
	}
	
	.uni-input-placeholder{
		font-size : 24upx;
		color : rgba(124,124,124,1);
	}
	
	/*表单input框字体*/
	.text_form_input{
		font-size : 28upx;
		padding-left: 40upx;
		text-align: left !important;
		color : #393737;
	}
	
	/*协议样式*/
	a:-webkit-any-link {
		font-size: 24upx;
		color: -webkit-link;
		cursor: pointer;
		text-decoration: none;
	}
	
	.codeBtn ,.nextBtn{
		color:rgba(255,255,255,1);
		background-color: rgb(0, 122, 255);
	}
	
	.codeBtn{
		height: 48upx ;
		border-radius: 40upx ;
		font-size: 24upx;
		line-height: 48upx;

	}
	
	/*下一步按钮样式*/
	.nextBtn{
		margin: 134upx auto !important;
		width: 400upx  !important;
		border-radius: 40upx ;
		font-size: 32upx;
		
	}
	
	.hr_style2 {
		border: 0;/* 去掉其中一条边线 */
		height: 1upx;/* 粗细 */
		background-color : rgba(223, 223, 223, 1);
		
		
	}
	
	.grid.col-4.grid-square>uni-view {
		/* padding-bottom: calc((100% - 30px)/4); */
		height: 202upx;
		width: 320upx;
	}
	
	.rectangle{
		height: 300upx;
	}
	
	/*控制上传部分大小切分div*/
	.m-left{
		padding: 10upx 0 0 20upx;
		width: 375upx;
		height: auto;
		
	}
	.radio-img{
		width: 34upx ;
		height: 34upx; 
		margin-left:20upx;
		float: left;
		margin-bottom: 20upx;
	}
	
	.input-area {
		width: 320upx !important;
		height: auto;
		margin-top: 20upx ;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.show-area{
		width: 320upx;
		height: 202upx;
		margin-top: 20upx;
	} 
	.show-area image{
		width: 100%;
		height: 100%;
	}
	
	.bg-img{
		position: relative;
		width: 320upx;
		height: 202upx;
	}
	.bg-img image{
		width: 100%;
		height: 100%;
	    
	}
	.show-image{
		width: 320upx;
		display: flex; 
		align-items: center;
		justify-content: center;
		
		border: 2upx solid #C0C0C0;
	}
	.add-image{
		width: 320upx;
		height: 190upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 64upx;
		
		
	}
	.cu-tag{
		position: absolute;
		top: 0;
		right: 0;
	}
</style>
